<template >
  <div
    class="subpage film"
    v-if="film"
    :style="{ paddingTop: !back ? 0 : 49 / 37.5 + 'rem' }"
  >
    <my-head v-if="back" :title="film.name" :back="true">
      <van-icon name="revoke" size="36" class="icon" />
    </my-head>
    <div class="film-box">
      <div class="film-top">
        <div class="back" v-if="!back" @click="$router.go(-1)">
          <van-icon name="arrow-left" color="#000" size="25" />
        </div>
        <img :src="film.poster" class="poster" alt="" />
      </div>
      <div class="film-info">
        <div class="info-col">
          <p class="title">
            <span class="name">
              {{ film.name }}
            </span>
            <span class="d2item">
              {{ film.item.name }}
            </span>
          </p>
          <span class="grade">
            {{ film.grade + "分" || "暂无评分" }}
          </span>
        </div>
        <div class="col-text">
          {{ film.category }}
        </div>
        <div class="col-text">
          {{ (film.premiereAt * 1000) | timeFormat("YYYY-MM-DD") }}上映
        </div>
        <div class="col-text">{{ film.nation }} | {{ film.runtime }} 分钟</div>
        <div class="col-text" ref="demo" v-if="flag">{{ film.synopsis }}</div>
        <div class="col-text">
          <div
            class="content"
            :style="{
              height: toggle ? '1rem' : height / 37.5 / dpr + 'rem',
            }"
          >
            {{ film.synopsis }}
          </div>
          <p class="picon">
            <van-icon
              :name="toggle ? 'arrow-down' : 'arrow-up'"
              @click="toggle = !toggle"
            />
          </p>
        </div>
      </div>

      <div class="actors">
        <p class="atitle">
          <span> 演职人员 </span>
        </p>
        <div class="actbox">
          <ul class="alist">
            <li class="aitem" v-for="(l, i) in film.actors" :key="i">
              <div class="imgbox">
                <img :src="l.avatarAddress" alt="" class="img" />
              </div>
              <p class="actor-name">
                {{ l.name }}
              </p>
              <p class="actor-role">
                {{ l.role }}
              </p>
            </li>
          </ul>
        </div>
      </div>

      <div class="photos">
        <p class="atitle">
          <span> 剧照 </span>
          <span v-if="film.photos" @click="show = true">
            全部({{ film.photos.length }})
          </span>
        </p>
        <div class="pbox">
          <ul class="plist">
            <li class="pitem" v-for="(l, i) in film.photos" :key="i">
              <img @click="showBigImg(i)" :src="l" class="pimg" alt="" />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="goSchedule" @click="gotocineams">选座购票</div>

    <van-popup
      closeable
      v-model="show"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="popbox">
        <h2 class="poptitle" v-if="film.photos">
          剧照({{ film.photos.length }})
        </h2>
        <div class="poplist">
          <img v-for="(l, i) in film.photos" :key="i" :src="l" alt="" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      film: null,
      height: 0,
      flag: true,
      toggle: true,
      show: false,
      back: false,
    };
  },

  mounted() {
    var that = this;
    window.addEventListener("scroll", function (e) {
      var scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;

      if (scrollTop > 100) {
        that.back = true;
      } else {
        that.back = false;
      }
    });

    this.$ajax
      .getMaiData(
        {
          filmId: this.$route.params.filmId,
        },
        {
          "X-Host": "mall.film-ticket.film.info",
        }
      )
      .then((res) => {
        console.log("123qwe");
        this.film = res.data.film;
        this.$nextTick(() => {
          this.height = this.$refs.demo.clientHeight;
          this.flag = false;
        });
      });
  },
  methods: {
    showBigImg(index) {
      ImagePreview({
        images: this.film.photos,
        startPosition: index,
      });
    },
    gotocineams() {
      this.$router.push({
        name: "cinemas",
        params: { filmId: this.film.filmId },
      });
    },
  },
};
</script>



<style lang="scss" scoped>
.popbox {
  width: 100%;
  padding-top: 50px;
  .poptitle {
    font-size: 17px;
    line-height: 44px;
    width: 100vw;
    text-align: center;
    color: #191a1b;
  }
  .poplist {
    display: flex;
    flex-wrap: wrap;
    img {
      width: 33%;
      height: 122px;
    }
  }
}
.atitle {
  width: 100%;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  text-align: left;
  color: #191a1b;
}
.photos {
  margin-top: 10px;
  background: #fff;
  .pbox {
    width: 100%;
    overflow: auto;
    .plist {
      display: flex;
      .pitem {
        width: 150px;
        height: 100px;
        margin-right: 10px;
        position: relative;
        flex-shrink: 0;
        overflow: hidden;
        .pimg {
          width: 150px;
          height: 200px;
          left: 0;
          position: absolute;
          top: 50%;
          transform: translateY(-30%);
        }
      }
    }
  }
}
.actors {
  margin-top: 10px;
  background: #fff;
  .actbox {
    width: 100%;
    overflow: auto;
    .alist {
      display: flex;
      .aitem {
        width: 85px;
        min-width: 85px;
        position: relative;
        margin-right: 10px;
        cursor: pointer;
        display: block;
        .actor-name {
          margin-top: 10px;
          font-size: 12px;
          color: #191a1b;
          width: 85px;
          height: 18px;
          display: block;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
        }
        .actor-role {
          font-size: 10px;
          color: #797d82;
          text-align: center;
        }
        .imgbox {
          width: 85px;
          height: 85px;
          position: relative;
          overflow: hidden;
          .img {
            position: absolute;

            top: 50%;
            transform: translate(0, -50%);
            width: 85px;
            height: 115px;
          }
        }
      }
    }
  }
}
.film {
  position: relative;
  padding-bottom: 49px;
  min-height: 100%;
  background: #f4f4f4;

  &-box {
    padding-bottom: 30px;
    .film-top {
      width: 100%;
      height: 210px;
      overflow: hidden;
      position: relative;
      .back {
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 1000;
        width: 30px;
        height: 30px;
        background: rgba(255, 255, 255, 0.5);
        text-align: center;
        line-height: 30px;
        color: #fff;
        border-radius: 50%;
      }
      .poster {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .film-info {
      padding: 15px;
      padding-top: 12px;
      background-color: #fff;
    }
    .info-col {
      margin-top: 4px;
      display: flex;
      justify-content: space-between;

      .title {
        display: flex;
        align-items: center;
      }
    }
    .picon {
      text-align: center;
    }
    .content {
      margin-top: 12px !important;
      transition: all 0.5s;
      overflow: hidden;
    }
    .col-text {
      font-size: 13px;
      color: #797d82;
      margin-top: 4px;
    }
    .grade {
      color: #ffb232;
      font-size: 18px;
    }
    .d2item {
      font-size: 12px;
      color: #fff;
      background-color: #d2d6dc;
      height: 14px;
      line-height: 14px;
      padding: 0 2px;
      border-radius: 2px;
    }
    .name {
      color: #191a1b;
      font-size: 16px;
      height: 22px;
      line-height: 22px;
      margin-right: 5px;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .goSchedule {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 49px;
    width: 100%;
    text-align: center;
    background-color: #ff5f16;
    color: #fff;
    font-size: 16px;
    line-height: 49px;
  }
}
</style>
